<template>
    <!-- 修改资料 -->

    <div>
                <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules">
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="编号" prop="number">
                                <el-input v-model="form.number" class="borderNone" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="form.name" class="borderNone" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="上传附件" prop="dataList">
                        <tsMultiple v-model="dataList" :addTemplate="addTemplate" edit :apiObj="apiObj"
                            @updateIndex="updateIndex">
                            <template #tableContent>
                                <el-table-column  label="图片" width="100">
                                    <template #default="scope">
                                        <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片" :src="scope.row.fileFullPath"
                                            @click="openDialog(scope.row.fileFullPath)"></el-image>
                                            <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath" controls style="width: 100%;height: 100%;"></video>
                                            <span v-else>{{ getFileName(scope.row)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fileKind" label="类别">
                                    <template #default="scope">
                                        <span v-if="scope.row.operationType == ''">{{ scope.row.fileKindName }}</span>
                                        <el-select v-else v-model="scope.row.fileKind">
                                            <el-option v-for="item in configData.fileKindList" :key="item.value"
                                                :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemIndex" label="排序">
                                    <template #default="scope">
                                        <span v-if="scope.row.operationType == ''">{{ scope.row.itemIndex }}</span>
                                        <el-input-number v-else v-model="scope.row.itemIndex" :min="1"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                    <template #default="scope">
                                        <span v-if="scope.row.operationType == ''">{{ scope.row.remark }}</span>
                                        <el-input v-else v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                                    </template>
                                </el-table-column>
                            </template>
                        </tsMultiple>
                    </el-form-item>

                </el-form>
                <div class="button-position">
                    <el-button @click="updateVisible">取 消</el-button>
                    <el-button type="primary" @click="updateBatchResourceData(formRef)">确 定</el-button>
                </div>
        <el-dialog v-model="dialogVisible" draggable>
                <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;" />
            </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
import tsMultiple from '@/components/tsUpload/multipe.vue'
import Api from '@/api/model/pm'
import {checkType} from '@/utils/checkType.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const configData = ref({})
const dataList = ref([])
const apiObj = ref(Api.product.deleteFile)
const addTemplate = reactive({
    fileKind: '',
    file: '',
    fileFullPath: '',
    itemIndex: '',
    remark:'',
    id: '',
})
const dialogImageUrl = ref()
const dialogVisible = ref(false)
// 添加用户数据的对象
const form = ref({
});

const formRef = ref()
const formRules = reactive({
})

onMounted(() => {
    getInit()
})

const getFileName = (row) =>{
    if(row.file!==null){
        return row.file.name
    }
    else{
        return row.fileName
    }
}

const getInit = async () => {
    let res = await Api.product.batchEdit.post(props.paramsData)
    console.log(res)
    if (res.code == 200) {
        form.value = res.bean
        configData.value = res.configData
        dataList.value = res.dataList
    }
}


const updateIndex = () => {
    dataList.value.forEach((item,index)=>{
        item.itemIndex = index+1
    })
}

const openDialog = (val) =>{
    dialogImageUrl.value = val
    dialogVisible.value = true
}

const restAddFormData = () => {
    formRef.value.resetFields();
}

const updateVisible = () => {
    emit('updatetable')
}


// 上传
const updateBatchResourceData = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            updateBatchResource();
        }
    })
}

const updateBatchResource = async () => {
    var params = {
        bean: {
            id:form.value.id
        },
        dataList: dataList.value,
    }
    console.log(params)
    let res = await Api.product.batchUpdate.post(params);
    if (res.code == 200) {
        restAddFormData()
        ElNotification.success({ title: '', message: '上传成功！', duration: 2000 });
        emit('updatetable',true)
    }
}

</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}
</style>

